<template>
	<div>
		<el-container id="app">
			<el-header class="header" :style="left"><topHeader :userInfoList="userInfoData" :message="left" :name="name" @func="getMsgFormSon"></topHeader></el-header>
			<el-container>
				<el-aside width=""><leftnav style="height: 100vh;" @leftHeader="leftHeader" @systemName="systemName"></leftnav></el-aside>
				<el-main class="main" :style="mainWdith"><router-view v-if="isRouterAlive" /></el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script>
import topHeader from './components/Header.vue';
import Leftnav from './components/leftnav';
import { userInfo } from './server/index.js';
export default {
	name: 'App',
	provide() {
		return {
			reload: this.reload
		};
	},
	data() {
		return {
			width: true,
			isCollapse: false,
			left: '',
			name: '',
			isRouterAlive: true,
			userInfoData: {},
		};
	},
	computed: {
		mainWdith() {
			return {
				width: this.$store.state.width
			};
		}
	},
	components: {
		Leftnav,
		topHeader
	},
	mounted() {
		this.userData();
	},
	methods: {
		//刷新
		reload() {
			this.isRouterAlive = false;
			this.$nextTick(function() {
				this.isRouterAlive = true;
			});
		},
		leftHeader(data) {
			this.isCollapse = data;
			if (this.isCollapse == true) {
				this.left = 'left:64px;width:97%';
			} else {
				this.left = 'left:200px;width:90%';
			}
		},
		getMsgFormSon(data) {
			console.log(data)
			this.name = data;
		},
		systemName(data) {
			if (data == 'institutionalFramework') {
				this.name = '组织机构';
			} else {
				this.name = data;
			}
		},
		userData() {
			//''
			const _this = this;
			_this.http.request({
				url: userInfo,
				data: '',
				success: function(res) {
					_this.userInfoData = res;
				},
				error: function() {}
			});
		}
	}
};
</script>
<style lang="less">
body {
	margin: 0px;
	.header {
		z-index: 99;
		position: fixed;
		left: 200px;
		width: 90%;
		padding-left: 0px;
		padding-right: 0px;
		#logo {
			float: left;
			height: 60px;
			width: 230px;
			line-height: 60px;
		}
	}
	.main {
		margin-top: 50px;
		margin-left: 10px;
		margin-right: 10px;
	}
}
.x_soso {
	width: 200px;
	margin-bottom: 15px;
	margin-right: 15px;
}
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}

#nav {
	padding: 30px;
	a {
		font-weight: bold;
		color: #2c3e50;
		&.router-link-exact-active {
			color: #42b983;
		}
	}
}
</style>
